<template>
    <div class="course-contacts-card card-box" v-loading="loading">
        <h5 class="card-title">
            <el-icon size="20" color="#1C77C3"><Avatar /></el-icon>
            {{ $t('course-contacts.tit') }}
        </h5>
        <div class="card-text">
            <template v-for="classTeacher in classTeacherList" :key="classTeacher.id">
                <h5>{{ classTeacher.name }}</h5>
                <div class="user-box" v-for="user in classTeacher.users" :key="user.id">
                    <RouterLink :to="`/console/user/${user.id}?courseId=${courseId}`" class="user-picture pic">
                        <img v-if="user.avatar_url" :src="user.avatar_url" class="ele" />
                        <el-icon v-else size="30" color="#fff"><User /></el-icon>
                    </RouterLink>
                    <div class="user-info">
                        <div class="fullname">{{ user.last_name }} {{ user.first_name }}</div>
                        <div class="tools-comms" v-if="user.id !== userStore.userinfoL?.id">
                            <el-icon size="16" color="#262626" @click="toMail(user.email)"><Message /></el-icon>
                            <div class="message-wrap">
                                <el-icon size="16" color="#262626" @click="router.push({ name: 'message', query: { userId: user.id}})"><ChatSquare /></el-icon>
                                <span class="message-num" v-if="unReadNum > 0">({{unReadNum}})</span>
                            </div>
                            
                        </div>
                    </div>
                </div>
            </template>
            <el-empty image=" " :description="$t('golbal.empty_desc')" v-if="!classTeacherList.length"></el-empty>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
import { goPage } from '@/utils/global'

import RoleService from '@/api/role'
import CourseService from '@/api/course'
import type { ClassTeacher } from '@/types/role'

import { useUserStore } from '@/stores/user'

const route = useRoute()
const userStore = useUserStore()
const courseId = ref<number>(Number(route.query.courseId || route.params.courseId))
const loading = ref(false)

const classTeacherList = ref<ClassTeacher[]>([])
function getClassTeacherToId() {
    loading.value = true
    RoleService.getByCourseId(courseId.value)
        .then(res => {
            classTeacherList.value = res
        })
        .finally(() => {
            loading.value = false
        })
}
const toMail = (email: string) => {
    window.location.href = `mailto:${email}`
}
// 获取未读留言数量
const unReadNum = ref<number>(0)
const getMessageUnreadCount = () => {
    CourseService.getMessageUnreadCount(courseId.value).then(res => {
        unReadNum.value = res
    }).finally(() => {
            
    })
}

onMounted(() => {
    getClassTeacherToId()
    getMessageUnreadCount()
})
</script>

<style lang="less" scoped>
.course-contacts-card {
    margin-bottom: 24px;

    &::before {
        background-color: #1c77c3;
    }

    .card-text {
        h5 {
            margin-bottom: 18px;
            font-size: 18px;
            color: #000;
            font-weight: normal;
        }

        .user-box {
            margin-bottom: 10px;
            width: 100%;

            &:last-child {
                margin-bottom: 0;
            }
        }
    }
}
.message-wrap{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-content: center;
    margin-left: 10px;
    cursor: pointer;
    .message-num{
        font-size: 13px;
        line-height: 13px;
        margin-left: 3px;
        color: #1C77C3;
        font-weight: bold;
    }
}
</style>
